<template>
  <div class="sex">
    <p class="title">男女比例</p>
    <p class="bg"></p>

    <div class="center">
      <div class="man">
        <span>男士</span>
        <img src="../../images/man.png" alt="">
      </div>
      <div class="woman">
        <span>女士</span>
        <img src="../../images/woman.png" alt="">          
      </div>
    </div>

    <div ref="charts" class="charts"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
// 引入echarts
import * as echarts from 'echarts';
let charts = ref()

onMounted(()=>{
  let myCharts = echarts.init(charts.value)
  myCharts.setOption({
    grid: { // 位置
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    xAxis: { // x轴
      type: "value",
      show: false // 隐藏
    },
    yAxis: [ // y轴
      {
        type: "category",
        position: "left",
        data: ["男生"],
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {show: false}
      },
      {
        type: "category",
        position: "right",
        data: ["女士"],
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {show: false}
      }
    ],
    series: [
      // 用男士的饼图覆盖女士的饼图
      {
        type: "bar",
        barWidth: 20,
        data: [0.6],
        z: 20,
        itemStyle: { // 数据样式
          borderRadius: 10,
          color: "#007AFE"
        },
        label: { // 描述
          show: true,
          color: "#E7E8ED",
          position: "insideLeft",
          offset: [0, -20],
          fontSize: 14,
          formatter: () => {
            return `男士 ${0.6 * 100}%`;
          }
        }
      },
      {
        type: "bar",
        barWidth: 20,
        data: [1],
        barGap: "-100%",
        itemStyle: {
          borderRadius: 10,
          color: "#FF4B7A"
        },
        label: {
          show: true,
          color: "#E7E8ED",
          position: "insideRight",
          offset: [0, -20],
          fontSize: 14,
          formatter: () => {
            return `女士 ${0.4 * 100}%`;
          }
        }
      }
    ]
  })
})
</script>

<style lang="scss" scoped>
.sex{
  .title{
    font-size: 20px;
    font-weight: 600;
  }
  .bg {
    width: 68px;
    height: 7px;
    margin-top: 10px;
    background: url('../../images/dataScreen-title.png');
  }

  .center{
    padding: 20px 60px 0 60px;
    display: flex;
    justify-content:  space-between;
    align-items: center;
    width: 100%;
    height: 140px;
    margin-top: 30px;
    
    .man,
    .woman{
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 110px;
      height: 100%;
      background-size: 100%;

      .span{
        margin-top: 2px;
        font-size: 13px;
        color: #ffffff;
      }
      img {
        width: 60px;
        height: 60px;
        margin-top: 20px;
      }
    }
    .man{
      background: url('../../images/man-bg.png') no-repeat;
    }
    .woman{
      background: url('../../images/woman-bg.png') no-repeat;
    }

  }

  .charts{
    height: 100px;
    padding: 0 60px;
  }

}
</style>